<template>
  <el-form-item :label="label" :prop="prop">
    <el-date-picker
      align="center"
      class="wde-date"
      :type="dateType"
      :format="format"
      :disabled="disabled"
      :readonly="readonly"
      v-model="newv"
      :value-format="format"
      :placeholder="placeholder"
      :picker-options="pickerOptions"
    ></el-date-picker>
  </el-form-item>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: [Date, Array, String],
  label: {
    type: String,
    default: "单据日期",
  },
  prop: {
    type: String,
    default: "billDate",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  pickerOptions: {
    type: Object,
    default: () => ({}),
  },
  dateType: {
    type: String,
    default: "date",
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD',
  },
});

const emit = defineEmits(['update:modelValue']);

const newv = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});
</script>

<style scoped>
.wde-date {
  width: 100%;
}
</style>
